<template>
    <div class="auth-wrapped">
        <div class="auth-main">
            <div class="text">类型</div>
            <el-select v-model="value" class="m-2" placeholder=" " size="large">
                <el-option v-for="item in mainOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="auth-detail">
            <!-- 选择值为 API  Key -->
            <div v-if="value === 'API  Key'">
                <div>
                    <div class="text">添加位置</div>
                    <el-select v-model="value1" class="m-2" placeholder=" " size="large">
                        <el-option v-for="item in headerOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <div class="text">KEY</div>
                    <el-input v-model="value2" class="m-2" placeholder=" " size="large">
                    </el-input>
                </div>
                <div>
                    <div class="text">Value</div>
                    <el-input v-model="value3" class="m-2" placeholder=" " size="large">
                    </el-input>

                </div>
            </div>
            <!-- 选择值为 Bearer  Token -->
            <div v-else-if="value === 'Bearer  Token'">
                <div>
                    <div class="text">Token</div>
                    <el-input v-model="value4" class="m-2" placeholder=" " size="large"> 
                        
                    </el-input>
                </div>
            </div>
            <!-- 选择值为 Base  Auth -->
           <div v-else-if="value === 'Base  Auth'">
            <div>
                <div class="text">Username</div>
                <el-input v-model="value5" class="m-2" placeholder=" " size="large">
                    </el-input>
            </div>
            <div>
                <div class="text">Password</div>
                <el-input v-model="value6" class="m-2" placeholder=" " size="large">
                    </el-input>
            </div>
           </div>
        </div>
        
    </div>
    
</template>
    
<script setup lang='ts'>
import { ref } from 'vue'
import TrendsDialog from '@/components/Ym-table/components/TrendsDialog.vue';
//定义主要选项的值
const value = ref('')
//定义APIKey添加位置的值
const value1 = ref('')
//定义APIKey的Key值
const value2 = ref('')
//定义APIKey的Value值
const value3 = ref('')
//定义Bearer  Token的Token值
const value4 = ref('')
//定义Base  Auth的Username值
const value5 = ref('')
//定义Base  Auth的Password值
const value6 = ref('')
//定义主要选项
const mainOptions = [
    {
        value: '从父类继承',
        label: '从父类继承',
    },
    {
        value: 'No  Auth',
        label: 'No  Auth',
    },
    {
        value: 'API  Key',
        label: 'API  Key',
    },
    {
        value: 'Bearer  Token',
        label: 'Bearer  Token',
        
    },
    {
        value: 'Base  Auth',
        label: 'Base  Auth',
    },
]
//定义APIKey次要选项//添加表头
const headerOptions = [
        
        {
            value: 'Header',
            label: 'Header'
        },
        {
            value: 'Query  Params',
            label: 'Query  Params'
        }
]
</script>
    
<style scoped lang="scss">
.auth-wrapped {
    width: 100%;
    height: 100%;
    font-size: 25px;
    line-height: 50px;
    color: #303133;

    &>div {
        width: 80%;
    }

    .auth-main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20%;
    }

    .auth-detail {
        height: 70%;

        &>div {
            height: 100%;
            display: flex;
            flex-direction: column;

            &>div {
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }

    }

    .text {
        padding-right: 20px;
        width: 20%;
        text-align: right;
    }

    .el-input {
        width: 45%;
    }

    //选择器
    .el-select--large {
        width: 45%;

        :deep(.el-input__inner) {
            font-size: 21px;
            color: #969799;
        }

    }
}
</style>